<template>
  <van-form @submit="onSubmit">
    <van-cell-group>
      <!-- S 表单信息 -->
      <div class="mod">
        <div class="mod-hd">
          <span class="title">填写表单信息</span>
        </div>
        <van-field
          label-width="110"
          v-model="form.username"
          label="户主姓名"
          placeholder="请输入户主姓名"
          :rules="[{ required: true, message: '请输入户主姓名' }]"
          required
          colon
        />
        <van-field
          label-width="110"
          v-model="form.phone"
          label="户主电话"
          placeholder="请输入户主电话"
          :rules="[{ required: true, message: '请输入户主电话' }]"
          type="tel"
          required
          colon
        />
        <van-field
          label-width="110"
          v-model="form.id_no"
          label="户主身份证号"
          placeholder="请输入户主身份证号"
          :rules="[{ required: true, message: '请输入户主身份证号' }]"
          required
          colon
        />
        <van-field
          label-width="110"
          v-model="form.handler"
          label="经办人"
          placeholder="请输入经办人"
          :rules="[{ required: true, message: '请输入经办人姓名' }]"
          required
          colon
        />
        <van-field
          label-width="110"
          v-model="form.handler_phone"
          label="经办人电话"
          placeholder="请输入经办人电话"
          :rules="[{ required: true, message: '请输入经办人电话' }]"
          required
          colon
        />
        <van-field
          label-width="110"
          v-model="form.handler_phone"
          label="经办人身份证号"
          placeholder="请输入经办人身份证号"
          :rules="[{ required: true, message: '请输入经办人身份证号' }]"
          colon
        />
        <van-field
          label-width="110"
          v-model="form.address"
          label="用户地址"
          placeholder="请输入用户地址"
          :rules="[{ required: true, message: '请输入用户地址' }]"
          required
          colon
        />
        <van-field
          label-width="70"
          name="groupChecked"
          label="申请事项"
          required
          colon
        >
          <template #input>
            <van-checkbox-group
              v-model="form.groupChecked"
              direction="horizontal"
            >
              <van-checkbox
                name="1"
                shape="square"
                checked-color="#2CBE9C"
                icon-size="14"
              >用水报装
              </van-checkbox
              >
              <van-checkbox
                name="2"
                shape="square"
                checked-color="#2CBE9C"
                icon-size="14"
              >用电报装
              </van-checkbox
              >
              <van-checkbox
                name="3"
                shape="square"
                checked-color="#2CBE9C"
                icon-size="14"
              >用气报装
              </van-checkbox
              >
            </van-checkbox-group>
          </template>
        </van-field>
      </div>
      <!-- E 表单信息 -->
      <!-- S 用水报装登记 -->
      <div class="mod">
        <div class="mod-hd">
          <span class="title">用水报装登记</span>
        </div>
        <van-field
          label-width="110"
          v-model="form.water_num"
          label="用水人数"
          placeholder="请输入用水人数"
          :rules="[{ required: true, message: '请输入用水人数' }]"
          required
          colon
        >
          <template #extra>
            <span class="right-name">人</span>
          </template>
        </van-field>
        <van-field
          label-width="110"
          v-model="form.water_num"
          label="设计水量"
          placeholder="请输入设计水量"
          colon
        >
          <template #extra>
            <span class="right-name">M³</span>
          </template>
        </van-field>
      </div>
      <!-- E 用水报装登记 -->
      <!-- S 用电报装登记 -->
      <div class="mod">
        <div class="mod-hd">
          <span class="title">用电报装登记</span>
        </div>
        <van-field
          label-width="110"
          v-model="form.water_num"
          label="申请容量"
          placeholder="请输入申请容量"
          :rules="[{ required: true, message: '请输入申请容量' }]"
          required
          colon
        >
          <template #extra>
            <span class="right-name-one">千瓦</span>
          </template>
        </van-field>
        <van-field
          label-width="70"
          name="groupChecked"
          label="业务类型"
          required
          colon
        >
          <template #input>
            <van-radio-group v-model="form.checked" direction="horizontal">
              <van-radio name="1" checked-color="#2CBE9C">新装</van-radio>
              <van-radio name="2" checked-color="#2CBE9C">增容</van-radio>
              <van-radio name="3" checked-color="#2CBE9C">临时</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <van-field
          label-width="110"
          v-model="form.water_num"
          label="供电方式"
          colon
        >
        </van-field>
      </div>
      <!-- S 用气报装登记 -->
      <div class="mod mod-last">
        <div class="mod-hd">
          <span class="title">用气报装登记</span>
        </div>
        <van-cell title="表格下载" title-style="title_style">
          <!-- 使用 right-icon 插槽来自定义右侧图标 -->
          <template #right-icon>
            <van-button type="primary" class="btn-small btn-primary" round>表单下载</van-button>
          </template>
        </van-cell>
      </div>
      <!-- E 用气报装登记 -->
      <div class="btn-group">
        <van-button type="primary" plain class="btn btn-plain-primary" round>暂存</van-button>
        <van-button type="primary" class="btn btn-primary" round>提交</van-button>
      </div>
    </van-cell-group>
  </van-form>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
import {
  CellGroup as VanCellGroup,
  Field as VanField,
  CheckboxGroup as VanCheckboxGroup,
  Checkbox as VanCheckbox,
  RadioGroup as VanRadioGroup,
  Radio as VanRadio,
  Cell as VanCell,
  Button as VanButton,
} from "vant";
// import { useRouter } from "vue-router";
export default defineComponent({
  name: "BzsqGr",
  components: {
    VanCellGroup,
    VanField,
    VanCheckboxGroup,
    VanCheckbox,
    VanRadioGroup,
    VanRadio,
    VanCell,
    VanButton,
  },
  setup() {
    // const router = useRouter();
    const form = ref({
      username: "",
      phone: "",
      id_no: "",
      handler: "",
      handler_phone: "",
      handler_id_no: "",
      address: "",
      groupChecked: [],
      water_num: "",
      checked: "1",
    });
    const onSubmit = (values: any) => {
      console.log("submit", values);
    };

    return {
      form,
      onSubmit
    };
  }
});
</script>

<style scoped lang="scss">
@import "~@/assets/scss/pub.scss";

.van-checkbox-group {
  font-size: pxToVw(24);
}
.van-field__control{
  justify-content: space-around;
}

.van-checkbox--horizontal {
  margin-right: 5px;
}

.mod {
  background-color: #fbfbfb;
  padding-bottom: pxToVw(20);
  .mod-hd {
    text-align: center;
    background-color: #ffffff;
    .title {
      color: #272727;
      font-size: pxToVw(30);
      position: relative;
      line-height: pxToVw(120);
      font-weight: bold;

      &:before {
        position: absolute;
        left: 50%;
        transform: translate(-50%, 0);
        bottom: pxToVw(-20);
        content: "";
        width: pxToVw(120);
        height: pxToVw(6);
        background-color: #2cbe9c;
        border-radius: 3px;
      }
    }
  }
}
.mod-last{
  padding-bottom: 0;
}
.right-name{
  font-size: pxToVw(28);
  width: pxToVw(50);
  display: inline-block;
}
.right-name-one{
  font-size: pxToVw(28);
  width: pxToVw(60);
  display: inline-block;
}
</style>
